<template>
  <view>
    <view style="display: flex">
      <!-- 一级分类 -->
      <view
        style="
          display: flex;
          flex-direction: column;
          background-color: white;
          height: 100vh;
          margin-top: -80rpx;
        "
      >
        <view
          class="type1"
          :style="{ background: init.color1 }"
          @click="getType(index)"
          v-for="(init, index) in goodType"
        >
          <view class="typebox1" :style="{ background: init.color2 }"></view>
          <text>{{ init.name }}</text>
        </view>
      </view>
      <!-- 二级分类 -->
      <view style="width: 100%">
        <view
          style="
            text-align: center;
            position: absolute;
            top: 20rpx;
            left: 60%;
            font-weight: bold;
          "
          >女装</view
        >
        <view class="nr1">
          <!-- // -->
          <view style="display: flex; margin: 10rpx" @click="goodinfo()">
            <view>
              <image :src="img" class="nrimg"></image>
            </view>
            <view class="nrtext">
              <view style="font-weight: bold"
                >2021秋冬款双面羊绒大衣,羊毛尼长款女士外套</view
              >
              <view class="nrjg">
                <text style="color: red">￥199.00</text>
                <!-- <image
                  src="/static/imgs/fl-1.png"
                  style="height: 40rpx; width: 40rpx"
                ></image> -->
              </view>
            </view>
          </view>

          <!-- // -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      img: "https://pic.rmb.bdstatic.com/bjh/events/0e5b8739e39fdb0d4fe37d16ed6485754120.png",
      goodType: [
        { name: "女装", type: 1, color1: "", color2: "red" },
        { name: "女装", type: 1, color1: "", color2: "white" },
        { name: "女装", type: 1, color1: "", color2: "white" },
      ], //分类
      goodInfo: [
        {
          img: "https://pic.rmb.bdstatic.com/bjh/events/0e5b8739e39fdb0d4fe37d16ed6485754120.png",
          name: "尼龙大衣",
        },
        {
          img: "https://pic.rmb.bdstatic.com/bjh/events/0e5b8739e39fdb0d4fe37d16ed6485754120.png",
          name: "包臀裙",
        },
        {
          img: "https://pic.rmb.bdstatic.com/bjh/events/0e5b8739e39fdb0d4fe37d16ed6485754120.png",
          name: "大调",
        },
        {
          img: "https://pic.rmb.bdstatic.com/bjh/events/0e5b8739e39fdb0d4fe37d16ed6485754120.png",
          name: "内裤",
        },
        {
          img: "https://pic.rmb.bdstatic.com/bjh/events/0e5b8739e39fdb0d4fe37d16ed6485754120.png",
          name: "百褶裙",
        },
      ], //商品信息
    };
  },
  methods: {
    goodinfo() {
      //跳转商品详细
      wx.navigateTo({
        url: "/pages/index/goodInfo",
      });
    },
    // 点击分类
    getType(index) {
      //先将所有的颜色设置为白色
      this.goodType.forEach((item) => {
        item.color1 = "white";
        item.color2 = "white";
      });
      //再将点击的颜色设置为红色
      this.goodType[index].color1 = "#f1f1f1";
      this.goodType[index].color2 = "red";
    },
  },
};
</script>

<style lang="less">
.nrjg {
  display: flex;
  margin: 20rpx;
  justify-content: space-between;
}
.nrtext {
  display: flex;
  flex: 2;
  margin-left: 10rpx;
  flex-direction: column;
}
.nrimg {
  width: 160rpx;
  height: 160rpx;
  flex: 1;
  border-radius: 20rpx;
}
.nr1 {
  margin: 0rpx 20rpx 20rpx 20rpx;
  background-color: white;
  border-radius: 10rpx;
  display: flex;
  flex-wrap: wrap;
}
* {
  margin: 0;
  padding: 0;
}
.good1 {
  display: flex;
  margin: 20rpx 15rpx 0rpx 20rpx;
  flex-direction: column;
  align-items: center;
  font-size: 25rpx;
  color: gray;
  justify-content: center;
}
page {
  background-color: #f1f1f1;
  font-size: 28rpx;
}
.typebox2 {
}
.typebox1 {
  background-color: red;
  width: 5rpx;
  height: 50rpx;
  margin-top: 15rpx;
  position: absolute;
}
.type1 {
  width: 200rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  color: red;
}
</style>
